<template>
	<uni-popup ref="callPhoneModal" @maskClick="close">
		<view class="callPhoneModal-wrapper">
			<view class="callPhoneModal-head">
				客服电话
			</view>
			<view class="callPhoneModal-close" @click="close">
				<uni-icons type="closeempty" size="20" color="#aaa"></uni-icons>
			</view>
			<view class="callPhoneModal-content">
				<view class="callPhoneModal-content-phone border" @click="onCallPhone">
					<view class="callPhoneModal-content-phone-icon">
						<image src="/static/icon-phone-circle.png" ></image>
					</view>
					<view class="callPhoneModal-content-phone-label">
						客服电话：{{ info.customerTel || '' }}
					</view>
					<view class="callPhoneModal-content-phone-arrow">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
				<view class="callPhoneModal-content-time">
					<view class="callPhoneModal-content-time-icon">
						<image src="/static/icon-time-circle.png" ></image>
					</view>
					<view class="callPhoneModal-content-time-label">
						工作时间：<text style="word-break: break-all;" decode>{{ info.workingHour }}</text>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				info: {}
			}
		},
		watch: {
			show(newVal, oldVal) {
				if (newVal === true) {
					this.getInfo()
				} else {
					this.$refs.callPhoneModal.close()
				}
			}
		},
		methods: {
			onCallPhone() {
				uni.makePhoneCall({
					phoneNumber: this.info.customerTel
				})
			},
			close() {
				this.$emit('close')
			},
			getInfo() {
				let that = this
				that.wxRequest({
					url: `${that.API}/customerService/getCustomerServiceInfo`,
					method: 'POST',
					data: {
						etpId: uni.getStorageSync(that.DATA_KEY.etpId)
					},
					success: res => {
						console.log(res)
						if (res.data.data) {
							that.info = res.data.data[0]
							this.$refs.callPhoneModal.open()
						}
					},
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.callPhoneModal-wrapper {
		background-color: #fff;
		width: 500rpx;
		border-radius: 20rpx;
		.callPhoneModal-head {
			padding: 30rpx;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
		}
		.callPhoneModal-close {
			position: absolute;
			right: 15px;
			top: 15px;
		}
		.callPhoneModal-content {
			font-size: 28rpx;
			color: #333333;
			padding: 0 30rpx;
			.callPhoneModal-content-phone {
				display: flex;
				align-items: center;
				padding: 30rpx 0;
				&.border {
					border-bottom: 2rpx solid #ccc;
				}
				.callPhoneModal-content-phone-icon {
					width: 50rpx;
					height: 50rpx;
					flex-shrink: 0;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.callPhoneModal-content-phone-label {
					padding-left: 40rpx;
					flex: 1;
				}
			}
			.callPhoneModal-content-time {
				display: flex;
				padding: 30rpx 0;
				.callPhoneModal-content-time-icon {
					width: 50rpx;
					height: 50rpx;
					flex-shrink: 0;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.callPhoneModal-content-time-label {
					padding-left: 40rpx;
					padding-right: 50rpx;
					padding-top: 6rpx;
					flex: 1;
				}
			}
		}
	}
</style>